<template>
  <view class="collection">
    <view class="row">
      <!-- 商品 -->
      <view class="row-item" 
      v-for="(item, index) in collectionList" :key="index" @tap="navTo('/pages/product/product',item.product_id)">
        <view class="image">
          <image :src="item.product.images[0].path||errorImage" mode="aspectFill"></image>
        </view>
        <view class="shop-name"> {{item.product.title}}</view>
        <view class="money"> ￥{{item.product&&item.product.spec[0].price}}</view>
      </view>
    </view>
    <rf-load-more :status="loadingType" v-if="collectionList.length > 0" />
		<rf-empty
			:info="'快去收藏一些商品吧~'"
			v-if="collectionList.length === 0 && !loading"
		></rf-empty>
    <!--加载动画-->
    <rfLoading isFullScreen :active="loading"></rfLoading>
  </view>
</template>

<script>

import { collectList } from "@/api/userInfo";
import rfLoadMore from "@/components/rf-load-more/rf-load-more";
export default {
  components: {
    rfLoadMore,
  },
  data() {
    return {
      collectionList: [],
      errorImage:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1606369214312&di=563e71805cb0876db7324ba8b883345e&imgtype=0&src=http%3A%2F%2F04.imgmini.eastday.com%2Fmobile%2F20180816%2F20180816215155_daba64bdb943256e699f58a6c1f76374_3.jpeg",
      page: 1,
      loadingType: "more",
      loading: true,
      moneySymbol: this.moneySymbol,
      // 控制滑动效果
      theIndex: null,
      oldIndex: null,
    };
  },
  onShow() {
    this.initData();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.page = 1;
    this.collectionList = [];
    this.loading = true;
    this.getCollectionList("refresh");
  },
  // 加载更多
  onReachBottom() {
    if (this.loadingType === "nomore") return;
    this.page++;
    this.getCollectionList();
  },
  methods: {
    // 数据初始化
    initData() {
      this.page = 1;
      this.collectionList.length = 0;
      this.getCollectionList();
    },
     // 跳转至商品列表
    navTo(route,id) {
      this.$mRouter.push({route:route,query:{id:id}})
    },
    // 获取收藏列表
    async getCollectionList(type) {
      await this.$http
        .get(`${collectList}`, {
          type: "product",
        })
        .then((r) => {
          this.loading = false;
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
          console.log(r.data)
          this.loadingType = r.data.length === 10 ? "more" : "nomore";
          this.collectionList = [...this.collectionList, ...r.data];
        })
        .catch(() => {
          this.loading = false;
          if (type === "refresh") {
            uni.stopPullDownRefresh();
          }
        });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #F9F9F9;
}
.collection {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 0 30upx;
    padding-top: 20upx;
    .row-item {
	  margin-bottom: 30upx;
	  border-radius: 10px 10px 0px 0px;
      .image {
        image {
          width: 336upx;
          height: 324upx;
          
        }
      }
      .shop-name {
        height: 42upx;
        font-size: 30upx;
        margin-left: 30upx;
        margin-top: 20upx;
        color: #333333;
        font-family: PingFang SC;
        font-weight: 500;
        line-height: 42upx;
      }
      .money {
        height: 41upx;
        margin-left: 30upx;
        font-size: 32upx;
        font-weight: bold;
        line-height: 41upx;
        color: #f91c1c;
      }
    }
  }
}
</style>
